<template>
<div>
  <div>
    <div style='margin-bottom: 20px;margin-top: 20px'>
      <el-form
        :inline="true"
        :label-position="labelPosition"
        label-width="120px"
        :model="formLabelAlign"
        style="width: 100%"
      >

        <el-form-item label="户号">
          <el-input v-model="formLabelAlign.homeId"></el-input>
        </el-form-item>
        <el-form-item label="户主身份证号码">
          <el-input v-model="formLabelAlign.homeMasterNumber"></el-input>
        </el-form-item>
        <div>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
            <el-button>重置</el-button>
          </el-form-item>
        </div>

      </el-form>
    </div>
  </div>
  <div class='flex-row' style='margin-bottom: 10px'>
    <el-button type="primary" plain @click='addhujiMethod'>新增户籍</el-button>
  </div>
  <div>
    <el-table :data="tableData" style="width: 100%" @select='selects' ref="scTable">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="homeId" label="户号" width="180" />
      <el-table-column prop="homeMaster" label="户主" width="180" />
      <el-table-column prop="homeMasterNumber" label="户主身份证号码" />
      <el-table-column prop="homeAddress" label="家庭住址" />
      <el-table-column fixed="right" label="操作" width="120">
        <template #default="scope">
          <el-button type="text" size="small" @click="handleClick(scope.$index, scope.row)"
          >详情</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div>
    <el-dialog v-model="dialogFormVisible" title="新增户籍" >
      <el-form :model="form" label-width="120px" ref="hujiForm">
        <el-form-item label="户号" prop="homeId">
          <el-input v-model="form.homeId"></el-input>
        </el-form-item>
        <el-form-item label="户主" prop="homeMaster">
          <el-input v-model="form.homeMaster"></el-input>
        </el-form-item>
        <el-form-item label="户主身份证号码" prop="homeMasterNumber">
          <el-input v-model="form.homeMasterNumber"></el-input>
        </el-form-item>
        <el-form-item label="家庭住址" prop="homeAddress">
          <el-input v-model="form.homeAddress" ></el-input>
        </el-form-item>
      </el-form>
      <span class="dialog-footer" >
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="addhujiInfo">确定</el-button
        >
      </span>
    </el-dialog>
  </div>
  <div>
    <el-dialog v-model="dialogTableVisible2" title="家庭详情">
      <el-table :data="hujitableData">
        <el-table-column property="usernamezh" label="姓名" width="150" />
        <el-table-column property="sex" label="性别" width="200" />
        <el-table-column property="cardNumber" label="身份证号" />
        <el-table-column property="relationship" label="与户主关系" />
      </el-table>
    </el-dialog>
  </div>
</div>
</template>

<script setup>
import { toRefs, reactive, onBeforeMount,ref,getCurrentInstance } from 'vue'
let { proxy } = getCurrentInstance();
import { ElMessage } from 'element-plus'
import { addhuji,queryhuji,queryhujidetail} from '@/api/huji'

const labelPosition = ref('left')
const formLabelAlign = reactive({
  homeId: '',
  homeMasterNumber: ''
})

const state = reactive({
  tableData: null,
  listLoading: true
})

const dialogFormVisible = ref(false)

const dialogTableVisible2 = ref(false)

const form = reactive( {
  homeId: '',
  homeMaster: '',
  homeMasterNumber:'',
  homeAddress: ''
})

const resetForm =()=>{
  proxy.form =  {
    homeId: undefined,
    homeMaster: undefined,
    homeMasterNumber:undefined,
    homeAddress: undefined
  }
}

onBeforeMount(() => {
  fetchData()
})



const hujidetail = reactive({
  hujitableData: null
})
const addhujiInfo=()=>{

  addhuji(form).then((response)=>{
    if(response.code == 2000){
      ElMessage({
        message: '新增成功',
        type: 'success',
      })
      proxy.dialogFormVisible=false;
      fetchData();
    }else{
      ElMessage.error('新增失败')
    }
    })
}

let { tableData, listLoading } = toRefs(state)

let { hujitableData} = toRefs(hujidetail)
const fetchData = ()=>{
  queryhuji().then((response)=>{
    debugger;
    if(response.code == 2000){
      state.tableData = response.data
      state.listLoading = false
    }
  })
}

const hujiForm = ref(null)

const addhujiMethod=()=>{
  proxy.dialogFormVisible = true
  hujiForm.value.resetFields();
}

const  handleClick =(index,row)=>{
  proxy.dialogTableVisible2 = true

  let param = {
    homeId:row.homeId
  }
  queryhujidetail(param).then((response)=>{
    hujidetail.hujitableData = response.data;
  })
}




</script>

<style scoped>

</style>
